<template>
  <div>
    <input type="text" v-model="value">
    <button @click="handleAdd">添加</button>
    <ul>
      <li v-for="(v, i) in list" :key="i">{{ v }}</li>
    </ul>
    <HelloWorldVue :message="message"></HelloWorldVue>
  </div>
</template>


<script lang="ts">
import { computed } from '@vue/reactivity';
import { defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
import { RootState } from '@/store'
import HelloWorldVue from '@/components/HelloWorld.vue';
export default defineComponent({
  components: {
    HelloWorldVue
  },
  setup() {
    const store = useStore<RootState>();
    const list = computed(() => store.state.list)
    const value = ref('')
    const message = '大家好'
    const handleAdd = () => {
      store.commit('addList', value.value)
      store.dispatch('fetchList')
      // store.commit({
      //   type: 'addList',
      //   payload: value.value
      // })
    }

    return {
      list,
      value,
      handleAdd,
      message
    }
  }
})
</script>